<template>
  <el-dialog
    v-model="dialogVisible"
    v-if="load"
    title="选择辅料"
    width="1050"
    :close-on-click-modal="false"
    @close="handleClose"
    :z-index="2000"
  >
    <div class="flex flex-wrap gap-[8px] mb-4">
      <el-select
        class="!w-[120px]"
        v-model="form.accessories_use"
        collapse-tags
        placeholder="类型"
        clearable
      >
        <el-option
          v-for="item in options['goods.GoodsSku']?.[0].accessoriesUseText"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <VGroup>
        <el-select class="!w-[120px]" v-model="form.skuRange.type">
          <el-option
            v-for="item in skuOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <multi-input
          v-model="form.skuRange.value"
          placeholder="请输入"
          class="w-50"
        ></multi-input>
      </VGroup>
      <el-input
        class="w-40"
        v-model="form.sku_cn_title"
        placeholder="请输入中文名称"
      ></el-input>
      <el-button class="ml-auto m-0" type="primary" @click="handleSearch()"
        >查询</el-button
      >
      <el-button class="!ml-0" @click="handleReset()">重置</el-button>
    </div>
    <vxe-table ref="tableRef" :data="tableData" height="530" resizable>
      <vxe-column type="radio" width="60"></vxe-column>
      <vxe-column field="attr_img" title="产品" width="80">
        <template #default="{ row }">
          <VImage
            :src="row.attr_img_watermark || row.attr_img"
            width="60"
            height="60"
            :preview="false"
          ></VImage>
        </template>
      </vxe-column>
      <vxe-column field="sku" title="SKU" width="120"> </vxe-column>
      <vxe-column field="custom_sku" title="自定义SKU" width="120"></vxe-column>
      <vxe-column field="sku_cn_title" title="产品名称" width="120">
        <template #default="{ row }">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="row.sku_cn_title"
            placement="top-start"
          >
            <VText :line="3" :value="row.sku_cn_title"></VText>
          </el-tooltip>
        </template>
      </vxe-column>
      <vxe-column field="accessories_use" title="辅料用途" width="120">
        <template #default="{ row }">
          <div>{{ filterAccessories(row.accessories_use) }}</div>
        </template>
      </vxe-column>
      <vxe-column field="unit_price" title="采购未税报价（CNY）" width="120">
        <template #default="{ row }">
          <dataAuthority
            auth="unit_price"
            :value="row.default_supplier?.unit_price"
          ></dataAuthority>
        </template>
      </vxe-column>

      <vxe-column field="unit_price" title="采购未税价（CNY）" width="120">
        <template #default="{ row }">
          <dataAuthority
            auth="unit_price"
            :value="row.default_supplier?.purchase_untaxed_price"
          ></dataAuthority>
        </template>
      </vxe-column>
      <vxe-column field="unit_price" title="采购含税价（CNY）" width="120">
        <template #default="{ row }">
          <dataAuthority
            auth="unit_price"
            :value="row.default_supplier?.unit_price_tax"
          ></dataAuthority>
        </template>
      </vxe-column>
    </vxe-table>
    <div>
      <vxe-pager
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[10, 20, 100]"
        @page-change="pageChange"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'Jump',
          'PageCount',
          'NextPage',
          'NextJump',
          'Sizes',
          'Total',
        ]"
      >
      </vxe-pager>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="serveFun"> 保存 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { ref, reactive, toRefs } from "vue";
import { getSKUAccessories } from "../api.js";
import VImage from "@/components/Image/index.vue";
import { ElMessage } from "element-plus";
let options = reactive(inject("options"));

const skuOption = [
  { label: "系统SKU", value: "sku" },
  { label: "自定义SKU", value: "custom_sku" },
];

const data = reactive({
  dialogVisible: false,
  load: false,
  tableData: [],
  form: {
    skuRange: { type: "sku", value: [], range: false },
  },
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  },
});

const { dialogVisible, load, tableData, form, page } = toRefs(data);

const getList = async () => {
  const formData = {
    ...page.value,
  };

  for (const key in form.value) {
    if (form.value.hasOwnProperty(key) && form.value[key].type) {
      formData[form.value[key].type] = form.value[key].value;
    }
  }

  const res = await getSKUAccessories({ ...formData, ...form.value });
  tableData.value = res.data;
  page.value.total = res.total;
};

const handleSearch = () => {
  page.value.pageNum = 1;
  getList();
};

const handleReset = () => {
  form.value = {
    skuRange: { type: "sku", value: [], range: false },
  };
  getList();
};

const pageChange = (val) => {
  page.value.pageNum = val.currentPage;
  page.value.pageSize = val.pageSize;
  getList();
};

const filterAccessories = (val) => {
  const item = options.value["goods.GoodsSku"]?.[0].accessoriesUseText.find(
    (i) => i.value == val
  );
  return item?.label || "--";
};

const open = async () => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  dialogVisible.value = true;
  getList();
};
const handleClose = () => {
  dialogVisible.value = false;
};

//获取已选中的行
const tableRef = ref();
const getSelectRow = () => {
  const $table = tableRef.value;
  if ($table) {
    return $table.getRadioRecord();
  }
};

const serveFun = async () => {
  const checked = getSelectRow();
  if (!checked) {
    ElMessage.error("请选择辅料");
    return;
  }
  emits("checked", checked);
  handleClose();
};

const emits = defineEmits("checked");
defineExpose({ open });
</script>
<style scoped>
:deep(.vxe-pager.is--perfect) {
  border: 0;
}

:deep(.vxe-cell--radio) {
  font-size: 20px !important;
}
</style>
